import Card from "antd/es/card/Card";
import BusinessMap from "../../../../../common/BusinessMap";
import { Button, Checkbox, Form, Input, Select, Space, Spin, InputNumber, Table, DatePicker } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import ScrollTable from "../../../../../common/ScrollTable";
import _ from 'lodash';
import { useParams } from 'react-router-dom'
import CztHandle from "../../../../../../utils/apis/CztHandle";
import '../CztEdit/index.less'
import { useHistory } from "react-router-dom/cjs/react-router-dom.min";
import FetchHelper from "../../../../../../utils/helper/fetch-helper";
import { disable } from "ol/rotationconstraint";
import '../CztLook/index.less'


export default function CztLook() {
  const rootRef = useRef();
  const [allColumns, setAllColumns] = useState();
  const [dynamicForms, setDynamicForms] = useState();
  const [idDatas, setIdDatas] = useState();
  const [componentDisabled, setComponentDisabled] = useState(true);
  const [cztXqLookData,setCztXqLookData]=useState(); 
  const [form] = Form.useForm();
  const [params, setParams] = useState({
    pageSize: 10,
    pageNum: 1
  })
  const [loading, setLoading] = useState();
  const { TextArea } = Input;
  //获取点击编辑行的id
// debugger
  const id = useParams()?.id;
  useEffect(() => {
    CztHandle.cztEditDynamicApi().then(datas => {
      setDynamicForms(datas)
    })
  }, [])

  useEffect(() => { 
    if(params){
    CztHandle.list(id).then(resp => {
     
      setIdDatas(resp.data)
      let xqLookData=JSON.parse(resp.data.xq)
      form.setFieldsValue({
        ...resp.data,
        ...xqLookData
      })
    })}
  }, [id,form,params])

  useEffect(()=>{
    CztHandle.cztXqDynamicApi().then(datas=>{
      // console.log(datas)
        setCztXqLookData(datas)
    })
  },[])

  const currentDate = new Date().toISOString().split('T')[0];
  //表格
  const data = [];
  const history = useHistory();
  const quxiaoHandle = () => {
    history.push(`/manager/czt`)
  }
  //保存
 

  return <div className='layout-h h100' style={{
    overflow: "scroll",
    color:'#ffffff'
  }}>
    {/* <Card className='h100 fill w0' style={{
      position: "relative",
    }} >
      <BusinessMap />

    </Card> */}
    <Card className='h100 fill' style={{
      height:"1500px"
    }}>
      <Form method="post"
        
        form={form}>
        <header style={{
          fontSize: 20,
          fontWeight: "bold"
        }}>设施</header>
        <hr />

        <div className="InputForm" style={{
          display:"flex",
          flexWrap:"wrap"
        }}>
          {idDatas !== undefined && dynamicForms !== undefined && dynamicForms.map((formItem) => {
            let node;
            switch (formItem.type) {
              case 'select':
                node = <Select></Select>;
                break;
              case 'text':
              default:
                node = <Input 
                
                disabled={componentDisabled}
                style={{
                  width: '90%',
                  fontSize:'15px',
                  color:'#ffffff',
                  fontWeight:'bold',
                  // backgroundColor:'transparent',
                  // opacity:'0.5'
                  
                }}
                  onChange={(e) => {

                  }}
              
                />
            }
            
            return <div style={{
              flexBasis:"33%",
              marginBottom:"10px"
            }}><Form.Item
              label={formItem.alias}
              name={formItem.name}
              
            //   disabled={componentDisabled}
              rules={[
                {
                //   required: true,
                  disable:true

                }
              ]}

            >
              {node}
            </Form.Item></div>
          })}

        </div>

        <div>
          <header style={{
            fontSize:"20px",
            fontWeight:"bold"
          }}>承灾体详情:</header><hr/>
        </div>
        <div className="InputForm" style={{
          display:"flex",
          flexWrap:"wrap"
        }}>
          {idDatas !== undefined && cztXqLookData !== undefined && cztXqLookData.map((formItem) => {
            let node;
            switch (formItem.type) {
              case 'select':
                node = <Select></Select>;
                break;
              case 'text':
              default:
                node = <Input 
                
                disabled={componentDisabled}
                style={{
                  width: '90%',
                  fontSize:'15px',
                  color:'black',
                  fontWeight:'bold',
                  backgroundColor:'transparent',
                  opacity:'0.5'
                  
                }}
                  onChange={(e) => {

                  }}
              
                />
            }
           
            return <div style={{
              flexBasis:"33%",
              marginBottom:"10px"
            }}><Form.Item
              label={formItem.alias}
              name={formItem.name}
              
            //   disabled={componentDisabled}
              rules={[
                {
                //   required: true,
                  disable:true

                }
              ]}

            >
              {node}
            </Form.Item></div>
          })}

        </div>
        <div className="btn-bottom" style={{
        //   marginLeft:'240px'
        }}>
        {/* <Button type="primary"
          
        >上一条</Button>
        <Button type="primary"
          
          >下一条</Button> */}
        <Button onClick={quxiaoHandle} type="primary">返回</Button>
        </div>
      </Form>
    </Card>


  </div>
}